<template>
    <div>
        <div class="square">
            <div class="title">添加商品</div>
            <div class="tips">支持手动添加商品，可拖动调整商品展示顺序。</div>
            <div class="content">
                <draggable :list="form.data.imgList" draggable=".item">
                    <template #item="{ index }">
                        <div class="item">
                            <img
                                :src="form.data.imgList[index].materialSrc[0].materialSrc"
                                style="width: 100%; height: 100%; border-radius: 4px" />
                            <div
                                class="drop bg"
                                v-if="form.data.imgList[index].onSale == 2 || form.data.imgList[index].onSale == 3">
                                {{ form.data.imgList[index].onSale == 2 ? '已下架' : '已售罄' }}
                            </div>
                            <div class="del" @click="deleteImg(index)">
                                <el-icon class="icon-del"><Delete /></el-icon>
                            </div>
                            <template v-if="index + 1 == form.data.imgList.length">
                                <ZwGeneralGoods :value="goodsId" :isMulti="true" @handle-confirm="submit">
                                    <template #btn>
                                        <div class="add other">
                                            <img src="@/assets/imgs/mall/decorate/add.png" class="addimg" />
                                        </div>
                                    </template>
                                </ZwGeneralGoods>
                            </template>
                        </div>
                    </template>
                </draggable>
                <template v-if="!form.data.imgList.length">
                    <ZwGeneralGoods :value="goodsId" :isMulti="true" @handle-confirm="submit">
                        <template #btn>
                            <div class="item add">
                                <img src="@/assets/imgs/mall/decorate/add.png" class="addimg" />
                            </div>
                        </template>
                    </ZwGeneralGoods>
                </template>
            </div>
        </div>
        <div class="square">
            <div class="title">排列方式</div>
            <div class="content">
                <el-radio-group v-model="form.data.tabs">
                    <el-radio-button label="1">一行一个</el-radio-button>
                    <el-radio-button label="2">一行两个</el-radio-button>
                    <el-radio-button label="3">一行三个</el-radio-button>
                    <el-radio-button label="4">单行滑动</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="square">
            <div class="title">模块间隙</div>
            <div class="content">
                <el-slider v-model="form.data.space" :step="1" :max="20"> </el-slider
                ><el-input
                    style="width: 58px; margin-left: 8px"
                    v-model="form.data.space"
                    @change="changeSpace"
                    type="number"
                    onkeyup="value=value.replace(/[^\d]/g,'')"></el-input
                ><span style="margin-left: 8px">像素</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, computed } from 'vue';
import draggable from 'vuedraggable';
import { ElMessage } from 'element-plus';
import request from '@/request';
import { getGoodsListHook } from '@/hooks/goods';
import storage from '@/commons/storage';
const emit = defineEmits(['changeSetting']);
const props = defineProps(['tabparam', 'comIndex', 'components']);
const open = ref(false);
const multiple = ref(false);
let form = reactive({ data: { space: 0, imgList: [], tabs: '2' } });
let allitem = ref([]);
const deleteImg = index => {
    form.data.imgList.splice(index, 1);
};
const goodsId = computed(() => {
    let ids = form.data.imgList.map(item => item.id);
    return ids;
});
const changeSpace = () => {
    form.data.space = Number(form.data.space);
};

/**添加商品 */
const submit = ids => {
    if (!ids.length) {
        ElMessage.warning('请选择商品');
        return;
    }
    //原数据
    let originIds = goodsId;
    // 过滤取消得数据
    let data = originIds.value.filter(item => ids.includes(item));
    ids.forEach(item => {
        if (!data.includes(item)) {
            data.push(item);
        }
    });
    request('goodsList', { goodsId: data }).then(res => {
        form.data.imgList = res.data;
        open.value = false;
    });
};
watch(
    () => form.data,
    val => {
        emit('changeSetting', {
            ...form.data,
            name: 'product',
            index: props.comIndex ? props.comIndex : 0
        });
    },
    {
        deep: true
    }
);
watch(
    () => props.comIndex,
    val => {
        allitem.value = JSON.parse(JSON.stringify(props.components));
        if (allitem.value.length) {
            form.data = Object.keys(allitem.value[val].options).length
                ? allitem.value[val].options
                : { space: 0, imgList: [], tabs: '2' };
        } else {
            form.data = { space: 0, imgList: [], tabs: '2' };
        }
    },
    { immediate: true }
);
watch(
    () => props.components,
    val => {
        if (val.length && Object.keys(val[props.comIndex].options).length) {
            form.data = val[props.comIndex].options;
        } else {
            form.data = { space: 0, imgList: [], tabs: '2' };
        }
    },
    { immediate: true, deep: true }
);
</script>
<style lang="scss" scoped>
:deep(.el-slider) {
    width: 100px;
}
.square {
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    .content {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 24px;

        .item {
            position: relative;
            left: 0;
            top: 0;
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 6px;
            margin-bottom: 6px;
            border: 1px solid #eaeaea;
            flex-shrink: 0;
        }
        .add {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
        }
        .other {
            position: absolute;
            left: 67px;
            top: -1px;
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 6px;
            margin-bottom: 6px;
            border: 1px solid #eaeaea;
        }
        .addimg {
            width: 18px;
        }
        .bg {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 20px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            line-height: 20px;
        }
        .drop {
            background: rgba(51, 48, 45, 0.6);
            text-align: center;
            border-radius: 0px 0px 4px 4px;
        }
        .del {
            position: absolute;
            left: 0;
            top: 0;
            width: 60px;
            height: 60px;
            color: #ffffff;
            opacity: 0;
            text-align: center;
            font-size: 20px;
            line-height: 60px;
            cursor: pointer;
        }
        .del:hover {
            // border-radius: 4px;
            background-color: var(--el-overlay-color-lighter);
            transition: var(--el-transition-duration);
            opacity: 1;
        }
    }
    .btntype {
        display: flex;
        margin-bottom: 16px;
        align-items: center;
        .warn {
            margin-left: 8px;
            width: 16px;
            height: 16px;
        }
    }
    .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
        line-height: 14px;
        margin-bottom: 8px;
        margin-top: 24px;
    }
    .title::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
    .tips {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #969696;
        line-height: 14px;
        margin-bottom: 16px;
    }
    .addline {
        display: flex;
        align-items: center;
        margin: 8px 0 24px 0;
    }
    .addType {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #33302d;
        margin-right: 16px;
    }
}
.btn {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #ff6b00;
    height: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    color: #ff6b00;
    line-height: 36px;
}
.item {
    position: relative;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 6px;
}
.del {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    color: #ffffff;
    opacity: 0;
    text-align: center;
    font-size: 20px;
    line-height: 60px;
    cursor: pointer;
}
.del:hover {
    // border-radius: 4px;
    background-color: var(--el-overlay-color-lighter);
    transition: var(--el-transition-duration);
    opacity: 1;
}
</style>
